<template>
	<view>
		<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :multiple='multiple'
			:maxCount="maxCount" :flie='flie' :width="width" :height="height">
			<slot></slot>
		</u-upload>
	</view>
</template>

<script>
	export default {
		name: "upload",
		props: {

			multiple: {
				type: Boolean,
				default: false
			},
			maxCount: {
				type: Number,
				default: 1
			},
			flie: {
				type: String,
				default: "media"
			},
			width: {
				type: Number,
				default: 80,
			},
			height: {
				type: Number,
				default: 80
			},
		},
		data() {
			return {
				fileList: [],
				urlList: [],
			};
		},
		methods: {
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.urlList.splice(event.index, 1);
			},
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$api.uploadFile(lists[i])
					let item = this.fileList[fileListLen];
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					}));
					this.urlList.push(result.fileName);
					fileListLen++
				}
			}
		},
		watch: {
			urlList(newValue) {
				this.$emit("getUrl", newValue);
			}
		}
	}
</script>

<style lang="less" scoped>

</style>